<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>order details</title>
 <link href="../../resources/css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"  type="text/css" />

<script src="../../resources/js/jquery-1.9.1.min.js" type="text/javascript"></script> 
  <script src="../../resources/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="../../resources/js/ligerui.min.js" type="text/javascript"></script>  
<script type="text/javascript">
	$(function(){
		var ORDER_HAS_BEEN_CHECKOUT = "已结账";
		var ORDER_INVALID = "作废";
		var ON_ORDERS_IN = "下单";
		
		var order = eval(${jsonHeader});
		
		$("#orderNum").html("单号：" + order.documentNumber);
		$("#today").html("日期：" + order.orderDate);
		var tr1 = "<td id='t_had'>经手人：</td>" + "<td id='t_value'>" + order.attn + "</td>" +
		        "<td id='t_had'>用餐时间：</td>" + "<td id='t_value'>" + order.mealTime + "</td>" +
		        "<td id='t_had'>订单类型：</td>" + "<td id='t_value'>" + order.orderCategory + "</td>";
		$("#tr1").html(tr1);
		
		var tr2 = 
		        "<td id='t_had'>会员号：</td>" + "<td id='t_value'>" + order.memberNo + "</td>" +
		        "<td id='t_had'>会员姓名：</td>" + "<td id='t_value'>" + order.memberName + "</td>" +
		        "<td id='t_had'>餐桌：</td>" + "<td id='t_value'>" + order.diningTableName + "</td>";
		$("#tr2").html(tr2);
		
		var tr3 = "<td id='t_had'>外送地址：</td>" + "<td id='t_value' colspan='3'>" + order.deliveryAddress + "</td>" +
				"<td id='t_had'>订单状态：</td>" + "<td id='t_value' class='special'>" + order.orderStatus + "</td>";
		$("#tr3").html(tr3);
		
		var tr3_1 = "<td id='t_had'>备注：</td>" + "<td id='t_value' colspan='5'>" + order.remark + "</td>";
		$("#tr3_1").html(tr3_1);
	
		var tr4 = "<td id='o_account'>--</td>" + 
				"<td id='o_account' colspan='3'>总    计：</td>" +
		        "<td id='o_account'>" + order.amount + "</td>" +
		        "<td id='o_account'>" + order.orderTotalPrice + "</td>";
		$("#tr4").html(tr4);
		
		$("button").button();//按钮控件
		
		if(order.orderStatus != ON_ORDERS_IN) {	//下单状态可以进行修改订单操作
			$("#updateOrder").prop("disabled", true);
		}
		if(order.orderStatus == ORDER_INVALID || order.orderStatus == ORDER_HAS_BEEN_CHECKOUT) {	//已作废的和已结账的可以进行作废操作。
			$("#deprecatedOrder").prop("disabled", true);
		}
		
		/**返回上一页**/
		$("#returnSearchOrder").click(function(){
			window.location.href="../index";
		});
		
		/**作废**/
		$("#deprecatedOrder").click(function(){
			$("#dialog-confirm").html("<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;''></span>单号为\"" 
				+ order.documentNumber + "\"的订单将被作废咯！作废的订单将不能流向结账环节，请您谨慎操作！</p>");
			$( "#dialog-confirm" ).dialog({
				resizable: false, height:200, width: 380, modal: true,
				buttons: {
					"确定作废": function() {
						$.post("../deprecatedOrder/" + order.orderHeaderId, function(data) {
							if(data)
								window.location.href="../index";
							else 
								alert("What happened???");
						});
					},
					"关闭": function() {
						$( this ).dialog( "close" );
					}
				}
			});
		});
		
		$("#updateOrder").click(function(){
			var orderheader = JSON.stringify(order);
			var url = "../showOrOperate/orderDetailsUpdate?orderHeader=" + orderheader;
			window.location.href= url;
		});
	});
	
</script>
<style type="text/css">
	body { font-size:12px;}
	table tr {background-color:#D7DBE3;}
	#t_had { text-align:right; width:70px; height: 25px;}
	#t_had1 {text-align:center; font-weight: bold; height: 25px;}
	#t_value {width:100px; height: 25px;}
	#t_value1 {text-align:center; height: 25px;}
	#o_account {text-align:center; font-size:20px; font-weight:bold;}
	.l-table-edit-td{ padding:1px;}
	.special {color: red; font-weight: 900;}
</style>
</head>
<body style="margin-left: 2px;">

<div id="dialog-confirm" title="你确定要作废该订单吗？">
</div>

<div id="talBar"><span style=" margin: 5px 10px; display: block; font-weight: bold;">宝华茶餐厅 > 订单管理 > 订单查询 > 订单明细</span></div>
<div style="width:700px;">
<div style=" width:100%; border-style:double; border-color:#666666; background-color: #D7DBE3;">
	<div>
	<div align="center" style="margin-bottom:5px; margin-top:2px; font-size: 25px; font-weight: 700;">宝华茶餐厅-订单明细</div>
	<div id="orderNum" style=" color:#FF0000; float: left; margin: 3px;"></div><div style="float: right; margin: 3px;" id="today"></div>
	</div>
	<table id="t_table" border="0" width="100%" cellpadding="0" cellspacing="1" bgcolor="#666666" align="center">
        	
        	<tr id = "tr1"></tr>
            <tr id = "tr2"></tr>
            <tr id = "tr3"></tr>
            <tr id = "tr3_1"></tr>
            <tr>
            	<td id="t_had1">编号</td>
                <td colspan="2" id="t_had1">商品名称</td>
                <td id="t_had1">单价（元）</td>
                <td id="t_had1">数量（个）</td>
                <td id="t_had1">总价（元）</td>
            </tr>
            <c:forEach  items="${lists }" var="list" varStatus="goodsStatus">
            <tr id='tr_${list.orderDetailsId }'>
	         	<td id='t_value1'>${goodsStatus.index + 1}</td>
	         	<td id='t_value1'  colspan='2'>${list.goodsName }</td>
	         	<td id='t_value1'>${list.goodsUnitPrice }</td>
	         	<td id='t_value1'>${list.amount }</td>
	         	<td id='t_value1'>${list.goodsTotalSalesPrice }</td>
	        </tr>
	        </c:forEach>
	        <tr id="tr4"></tr>
        </table>
        <div style="margin-bottom:5px; margin-top: 10px;"></div>
        
</div>
<div style=" background-color:#F0F5FF; height:40px; margin-top:10px; padding-right:10px; vertical-align:middle; padding-top:10px; text-align:right; border-top-color:gray; width:100%; float:left;">
	<button id="updateOrder" value="" name="update">修改订单</button>
	<button id="deprecatedOrder" value="" name="deprecated">作废</button>
	<button id="returnSearchOrder" value="" name="return">返回</button>
</div>
</div>
</body>
</html>